/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
// 持久存储插件
import createPersistedState from "vuex-persistedstate";

//使用vuex
Vue.use(Vuex);

/**
 * 在需要多人协作的项目中，我们可以使用常量代替mutation 事件类型。这在各种 Flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。
 *  定义存储信息
 *   */

const types = {
  SET_USER: "SET_USER", //用户信息
  SET_TARGET_USER: "SET_TARGET_USER",
  RESET_STATE: "RESET_STATE" // reset state
};

// Define an initial state
// const INIT_STATE = {
//   user: {},
//   targetUser: {}
// };

const state = {
  //用户初始化的状态
  user: {},
  targetUser: {}, //用户详细资料数据
};

const getters = {
  //获取到用户状态,//实时监听state值的变化(最新状态)
  user: state => state.user,
  targetUser: state => state.targetUser,
};

const mutations = {
  //自定义改变state初始值的方法
  // 确定type属性类型
  [types.SET_USER](state, user) {
    if (user) {
      state.user = user; //如果user有内容就赋给状态信息
    } else {
      //如果没内容就给user赋空对象
      state.user = {};
    }
  },
  [types.SET_TARGET_USER](state, targetUser) {
    if (targetUser) {
      state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
    } else {
      //如果没内容就给targetUser赋空对象
      state.targetUser = {};
    }
  },

  // 重置所有状态
  // [types.RESET_STATE](state, initState) {
  //   if (initState) {
  //     /**
  //      * 注：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性
  //      * Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。
  //      *  */
  //     Object.assign(state, initState);
  //   }
  // }
};

const actions = {
  //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
  // 页面定义的setUser,user为页面传过来的值
  setUser: ({ commit }, user) => {
    // 把user存储到types中的SET_USER
    commit(types.SET_USER, user);
  },
  setTargetUser({ commit }, targetUser) {
    commit(types.SET_TARGET_USER, targetUser);
    // localStorage.setItem("SET_TARGET_USER", JSON.stringify(targetUser));
  },
 

  // 重置所有状态
  // resetState({ commit }) {
  //   commit(types.RESET_STATE, INIT_STATE);
  // }
};

const plugins = [
  createPersistedState({
    storage: window.sessionStorage,
    // storage: window.localStorage
    reducer(val) {
      return {
        // 只储存state中的user
        targetUser: val.targetUser,
        user: val.user
      };
    }
  })
];
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  plugins
});
